<style lang="scss">
    .scoped-newcepin{
        .list-sign{
            &::before{
                content: '';
                display: inline-block;
                width: 3px;
                height: 11px;
                background: #578cf9;
                margin-right: 10px;
            }
        }

        .el-carousel__indicator{
            .el-carousel__button{
                border-radius: 50%;
                width: 10px;
                height: 10px;
                background: #eee;
            }
            &.is-active{
                .el-carousel__button{
                    background-color: orangered;
                }
            }
        }

        .txt-score{
            width: 30px;
            margin: 0 5px;
            display: inline-block;
            text-align: center;
        }
    }
</style>
<template>
    <div class="scoped-newcepin flex-1 ui-border-dark p20 bg-white pb0">
        <div class="pb10 ui-border-bottom f21" >最新测评</div>
        <div class="pt20">
            <!-- banner -->
            <el-carousel class="banner-small" height="220px">
                <el-carousel-item v-for="item in list" :key="item.id">
                    <div class="flex col-center">
                        <ui-img :url="item.logo" size="40px" class="mr20"></ui-img>
                        <span class="f18" style="color:#000">{{item.name}}</span>
                        <div class="f-color-orange f16 flex flex-1 row-end f21">{{item.score}}</div>
                    </div>
                    <div class="ml60 mt10">
                        <el-progress :percentage="parseFloat(item.score)" :stroke-width="10" :show-text="false" class="mb20"></el-progress>
                        <p class="list-sign">产品:
                            <span class="txt-score">{{item.goodtxt_score}}</span>
                            {{listType(item.goodpercent)}}
                        </p>
                        <p class="list-sign">运营:
                            <span class="txt-score">{{item.yunyingtxt_score}}</span>
                            {{listType(item.yunyingpercent)}}
                        </p>
                        <p class="list-sign">硬件:
                            <span class="txt-score">{{item.yingjiantxt_score}}</span>
                            {{listType(item.yingjianpercent)}}
                        </p>
                        <p class="list-sign">客服:
                            <span class="txt-score">{{item.kefutxt_score}}</span>
                            {{listType(item.kefupercent)}}
                        </p>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                list:[]
            }
        },
        mounted(){
            // 最新测评
            this.$http.get('index.php?g=home&m=paperRecord&a=get_node_percent&paper_id=13', {
                params:{
                    page_size:3
                }
            })
            .then(({data})=>{
                console.log('最新测评', data)
                if (data.code===1) {
                    this.list = data.data

                }
            })

        },
        methods:{
            listType(num){
                let n = parseFloat(num)
                let type = n>=0?'高于':'低于'
                let value = Math.abs(n*100).toFixed(2)
                return `${type}同行${value}%`
            }
        },
    }
</script>
